<template>
	<view id="myInvoicePage">
		<view class="address-wrapper" @click="toAdrEdit">
			<view class="address-title">
				<view class="user-name">
					唐先生
				</view>
				<view class="user-tel">
					123****8910
				</view>
			</view>
			<view class="address">
				广东省深圳市南山区京开路与通海路交叉口
			</view>
			<image class="arrow" src="../../static/img/nav-arrow.png" mode="aspectFill"></image>
		</view>
		<image src="../../static/img/line.png" class="line" mode="aspectFill"></image>
		<view class="border-top">
			<view class="item">
				<view class="item-con">
					<view class="item-name">
						A580进口高速防滑传动带 ￥299.00
					</view>
					<view class="item-time">
						2019-08-05 12:00:00
					</view>
				</view>
			</view>
			<view class="item">
				<view class="item-con">
					<view class="item-name">
						A580进口高速防滑传动带 ￥299.00
					</view>
					<view class="item-time">
						2019-08-05 12:00:00
					</view>
				</view>
			</view>
		</view>
		<view class="labels border-top">
			<view class="label-row">
				<view class="key">
					税费
				</view>
				<view class="val">
					￥89.00
				</view>
			</view>
			<view class="label-row">
				<view class="key">
					快递费
				</view>
				<view class="val">
					￥89.00
				</view>
			</view>
		</view>
		<view class="choose border-top">
			<view class="key">
				抬头信息
			</view>
			<view class="radios">
				<view class="radio-wrap" @click="radioChange">
					<image v-if="personal" src="../../static/img/tick.png" mode="aspectFill" class="radio-ico"></image>
					<image v-else src="../../static/img/select.png" mode="aspectFill" class="radio-ico"></image>
					<text class="radio-txt">个人</text>
				</view>
				<view class="radio-wrap" @click="radioChange">
					<image v-if="!personal" src="../../static/img/tick.png" mode="aspectFill" class="radio-ico"></image>
					<image v-else src="../../static/img/select.png" mode="aspectFill" class="radio-ico"></image>
					<text class="radio-txt">公司</text>
				</view>
			</view>
		</view>
		
		<view class="cart-footer">
			<view class="footer-key">
				应付：
			</view>
			<view class="total-wrapper">
				￥299.00
			</view>
			<view class="sumbit" @click="sumbit">
				提交订单
			</view>
		</view>
		<pay v-if="showPay" @close="payClose" name="传动带上传订单支付" price="290.00"></pay>
	</view>
</template>

<script>
	import pay from "@/components/pay/pay.vue"
	export default {
		components: {pay},
		data() {
			return {
				personal: true,
				showPay: false
			}
		},
		methods: {
			toAdrEdit() {
				uni.navigateTo({
					url: '../adressEdit/adressEdit',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			radioChange() {
				this.personal = !this.personal
			},
			sumbit() {
				this.showPay = true
			},
			payClose() {
				this.showPay = false
			}
		}
	}
</script>

<style>
#myInvoicePage {
	
}
.address-wrapper {
	height: 135upx;
	padding: 25upx 26upx 0 24upx;
	position: relative;
}
.address-title {
	height: 28upx;
	display: flex;
	font-size:28upx;
	font-weight:500;
	color:rgba(51,51,51,1);
	margin-right: 31upx;
}
.address {
	font-size:24upx;
	font-weight:400;
	color:rgba(122,122,122,1);
	margin: 28upx 0 0 0;
}
.arrow {
	width: 15upx;
	height: 25upx;
	position: absolute;
	top: 55upx;
	right: 26upx;
}
.line {
	display: block;
	height: 4upx;
	width: 100%;
}
.border-top {
	border-top: 20upx solid rgb(246,246,246);
	padding-left: 24upx;
}

.item {
	padding: 38upx 30upx 19upx 0;
	display: flex;
	border-bottom: 1upx solid #F7F7F7;
	position: relative;
}
.sel-btn {
	width: 37upx;
	height: 37upx;
}
.item-con {
	/* width: 475upx; */
}
.item-name {
	font-size:30upx;
	font-weight:500;
	color:rgba(51,51,51,1);
}
.item-time {
	font-size:20upx;
	font-weight:400;
	color:rgba(102,102,102,1);
	margin-top: 22upx;
}
.item-status {
	font-size:22upx;
	font-weight:500;
	color:rgba(234,10,42,1);
	position: absolute;
	top: 49upx;
	right: 28upx;
}
.label-row {
	height: 80upx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size:28upx;
	font-weight:500;
	padding-right: 26upx;
}
.key {
	color:rgba(102,102,102,1);
}
.choose {
	display: flex;
	font-size:28upx;
	padding-top: 34upx;
}
.radios {
	margin-left: 46upx;
	display: flex;
	align-items: center;
}
.radio-wrap {
	margin-left: 35upx;	
	display: flex;
	align-items: center;
}
.radio-ico {
	width: 39upx;
	height: 39upx;
}
.radio-txt {
	margin-left: 15upx;
	width:55px;
	font-size:28upx;
	font-weight:500;
	color:rgba(0,0,0,1);
}
.footer-key {
	padding-left: 29upx;
	color: #333333;
	font-size: 26upx;
	width: 129upx;
	flex: 1 129upx 0;
	display: flex;
	align-items: center;
}
.total-wrapper {
	color: #EA0A2A;
	display: flex;
	align-items: center;
}
</style>
